<ion-content>
  <ion-grid fixed>
    <div>1 col in row</div>
    <ion-row>
      <ion-col>
        <div class="box">1</div>
      </ion-col>
    </ion-row>

    
    <div>5 col in row</div>
    <ion-row>
      <ion-col>
        <div class="box">1</div>
      </ion-col>
      <ion-col>
        <div class="box">2</div>
      </ion-col>
      <ion-col>
        <div class="box">3</div>
      </ion-col>
      <ion-col>
        <div class="box">4</div>
      </ion-col>
      <ion-col>
        <div class="box">5</div>
      </ion-col>
    </ion-row>

    <div>size</div>
    <ion-row>
      <ion-col size="2">
        <div class="box">2/12</div>
      </ion-col>
      <ion-col size="4">
        <div class="box">4/12</div>
      </ion-col>
      <ion-col size="6">
        <div class="box">6/12 size</div>
      </ion-col>
    </ion-row>    

    <div>offset 1</div>
    <ion-row>
      <ion-col size="6" offset="3">
        <div class="box">6/12 offset</div>
      </ion-col>
    </ion-row> 

    <div>offset 2</div>
    <ion-row>
      <ion-col size="2">
        <div class="box">2/12</div>
      </ion-col>
      <ion-col size="4" offset="6">
        <div class="box">4/12</div>
      </ion-col>
    </ion-row> 

    <div>offset 3 :</div>
    <ion-row>
      <ion-col size="2" offset="3">
        <div class="box">2/12</div>
      </ion-col>
      <ion-col size="4" >
        <div class="box">4/12</div>
      </ion-col>
    </ion-row> 

    <div>push/pull :</div>
    <ion-row>
      <ion-col size="8" push="4">
        <div class="box">8/12</div>
      </ion-col>
      <ion-col size="4" pull = 8 >
        <div class="box">4/12</div>
      </ion-col>
    </ion-row> 
    


  </ion-grid>
</ion-content>